●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Social feed page with left Sidebar, center feed, pinned carousel, composer, posts list and right profile widget.
- Composer form using EditForm and InputTextArea with client-side required validation.
- Reusable components: PostComposer, PostCard, RightProfileWidget, Sidebar, LearningSectionAccordion and LearningServiceCard.
- Tabs for content filtering, simple search inputs, and an accordion-based learning section with cards.
- Client-only state handling for posts, pinned items, and tab/accordion toggles.
## Key components
- EditForm, InputText, InputTextArea
- Component parameters and EventCallback<PostModel> (PostComposer -> Social feed)
- @bind-Value usage for search and composer content
- LearningSectionAccordion, LearningServiceCard, PostCard, RightProfileWidget, Sidebar
## How it works
- Data seeding occurs in OnInitialized with in-memory collections (Posts, pinnedItems, sections).
- Posting flow: PostComposer collects content, builds a PostModel, and emits it via OnPost EventCallback which the page prepends to Posts.
- UI interactions use @bind-Value for two-way binding and local methods for tab/accordion toggles (SetTab, OnSectionToggled).
- Validation uses DataAnnotations on the composer model; EditForm.OnValidSubmit triggers SubmitPost.
## Styling
- Tailwind utility classes power layout, spacing, and responsive behavior (flex, grid, gap-*, px-*, text-slate-*, rounded-*).
- Icons rely on Font Awesome CSS classes (fas fa-...).
- Responsive considerations: grid and flex breakpoints (md:, lg:, xl:) used for column behavior and hidden/visible sidebars.
## Reuse steps
1. Add component files to a Blazor project and include model classes (SocialModels.cs, LearningModels.cs).
2. Install and configure Tailwind CSS (or include equivalent utility CSS) and add Font Awesome for icons.
3. Import namespaces where needed and register any shared services; no special NuGet packages required for these components.
4. Wire server-side services or APIs: replace seeded lists with injected services (e.g., IPostService) and call async methods from lifecycle methods.
5. Parameterize user/context data and add authentication/authorization if needed for posting and profile info.
## Limitations & next steps
- Page contains only client-side seeded data; persistence, API integration, and authentication are not implemented.
- No server-side validation or anti-forgery protections; add server endpoints and model validation for production.
- Accessibility and keyboard navigation need review (aria attributes, focus management for accordion and composer).
- Extend with paging, real-time updates (SignalR), image uploads, and search/filter backend logic.